<template>
  <view class="main-pd u-m-t-28">
    <view class="u-card" v-if="dataList.length && !loading">
      <view class="wxjj-item" v-for="item in dataList" :key="item.id">
        <view class="color-000 font-32 u-line-1">{{ item.title }}</view>
        <view class="u-flex u-flex-between u-m-t-24">
          <view :class="[wxClass(item.state), 'status']">{{
            wxStatus(item.state)
          }}</view>
          <view
            class="color-f34b47 font-28"
            @click="$u.route('/pagesB/wxjj/cybj', { id: item.id })"
            >参与表决 ></view
          >
        </view>
      </view>
    </view>
    <view v-show="loading">
      <u-skeleton rows="5" title loading></u-skeleton>
    </view>
    <view class="empty-con">
      <u-empty mode="list" :show="!dataList.length && !loading"></u-empty>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { getwxjjListApi } from "@/api/index";
import { useList } from "@/hooks/useList";
import { onLoad, onShow } from "@dcloudio/uni-app";
import useInfoStore from "@/store/user";
const userStore = useInfoStore();
const { loadData, dataList, page, loading } = useList({
  listApi: getwxjjListApi,
  otherParam: { deptId: userStore.deptId, dzyzkId: userStore.dzyzkId },
});
// 维修状态判断
const wxStatus = computed((status) => {
  return function (status) {
    let statusArr = ["已结束", "进行中", "未开始"];
    return statusArr[status];
  };
});
const wxClass = computed((status) => {
  return function (status) {
    return "status" + status;
  };
});
onShow(() => {
  page.value = 1;
  dataList.value = [];
  loadData({ deptId: userStore.deptId, dzyzkId: userStore.dzyzkId });
});
</script>

<style lang="scss" scoped>
.wxjj-item {
  border-bottom: 1rpx solid #e6e6e6;
  padding: 28rpx 0;

  &:first-child {
    padding-top: 0;
  }

  &:last-child {
    border: none;
    padding-bottom: 0;
  }
}
.status {
  width: 132rpx;
  height: 40rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status0 {
  background-color: #f0f0f0;
  color: #595959;
}

.status1 {
  background-color: #edf9e8;
  color: #52c41a;
}

.status2 {
  background-color: #ffedee;
  color: #ff4d4f;
}
</style>
